<template>
  <view class="container">
    <u-picker
      :show="show"
      ref="uPicker"
      :columns="columns"
      :title="title"
      @cancel="show = false"
      @confirm="confirm"
    ></u-picker>
    <u-datetime-picker
      :minDate="newData"
      :show="dateTimeShow"
      mode="datetime"
      :title="title"
      @cancel="dateTimeShow = false"
      @confirm="checkDateTime"
    ></u-datetime-picker>
    <view>
      <u--form
        labelPosition="left"
        :model="from"
        :rules="rules"
        ref="form1"
        labelWidth="120px"
        :labelStyle="labelStyle"
      >
        <view class="title"> 基础信息 </view>
        <view class="box">
          <u-form-item label="作业票名称" prop="zypmc" borderBottom>
            <u--input
              v-model="from.zypmc"
              placeholder="输入作业票名称"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="作业申请单位"
            prop="zysqdw"
            borderBottom
            @click="
              show = true;
              (showType = 1), (title = '作业申请单位');
            "
          >
            <u--input
              v-model="from.zysqdw"
              placeholder="选择申请单位"
              border="none"
              disabled
              disabledColor="#ffffff"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item
            label="作业申请时间"
            prop="applyDate"
            borderBottom
            @click="(dateTimeShow = true), (dateTimeType = 1), (title = '作业申请时间')"
          >
            <u--input
              v-model="from.applyDate"
              placeholder="选择作业申请时间"
              border="none"
              disabled
              disabledColor="#ffffff"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item
            label="作业实施时间"
            prop="workImplementDate"
            borderBottom
            @click="(dateTimeShow = true), (dateTimeType = 2), (title = '作业实施时间')"
          >
            <u--input
              v-model="from.workImplementDate"
              placeholder="选择作业实施时间"
              border="none"
              disabled
              disabledColor="#ffffff"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <user-pick
            :label="'监护人'"
            :multiple="false"
            :title="'监护人'"
            :placeholder="'请选择监护人'"
            v-model="from.jhr"
            :prop="'jhr'"
          ></user-pick>
          <view style="color: #838383; padding: 10px 0">作业内容</view>
          <u--textarea
            v-model="from.zynnr"
            placeholder="请输入..."
            height="120"
            confirmType="next"
            style="margin-bottom: 15px; background: #f6f6f6"
            count
            :maxlength="500"
          ></u--textarea>
          <u-form-item
            label="高处作业级别"
            prop="gczyjb"
            borderBottom
            @click="
              show = true;
              (showType = 3), (title = '高处作业级别');
            "
          >
            <u--input
              v-model="from.gczyjb"
              placeholder="选择高处作业级别"
              border="none"
              disabled
              disabledColor="#ffffff"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <user-pick
            :label="'作业人'"
            :multiple="false"
            :title="'作业人'"
            :placeholder="'请选择作业人'"
            v-model="from.zyr"
            :prop="'zyr'"
          ></user-pick>
          <u-form-item
            label="作业单位"
            prop="zydw"
            borderBottom
            @click="
              show = true;
              (showType = 5), (title = '作业单位');
            "
          >
            <u--input
              v-model="from.zydw"
              placeholder="选择作业单位"
              border="none"
              disabled
              disabledColor="#ffffff"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <user-pick
            :label="'作业负责人'"
            :multiple="false"
            :title="'作业负责人'"
            :placeholder="'请选择作业负责人'"
            v-model="from.zyfzr"
            :prop="'zyfzr'"
          ></user-pick>
          <u-form-item label="作业高度" prop="zygd" borderBottom>
            <u--input
              v-model="from.zygd"
              placeholder="输入作业高度（m）"
              border="none"
            ></u--input>
          </u-form-item>
        </view>
        <view class="title"> 关联特殊作业 </view>
        <view class="box">
          <u-form-item
            label="关联特殊作业"
            prop="gltszy"
            @click="(show = true), (showType = 7), (title = '关联特殊作业')"
          >
            <u--input
              v-model="from.gltszy"
              placeholder="选择关联特殊作业"
              border="none"
              disabled
              disabledColor="#ffffff"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </view>
        <view class="title"> 危害辨识-安全措施 </view>
        <view class="box" style="padding-bottom: 6px">
          <u-form-item
            label="危害辨识"
            prop="text"
            borderBottom
            @click="toHazardousFactors"
          >
            <u--input
              v-model="from.text"
              placeholder="选择危害因素"
              border="none"
              disabled
              disabledColor="#ffffff"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <view
            style="
              background: #f6f6f6;
              margin-bottom: 30px;
              border-radius: 8px;
              height: 200px;
              overflow-y: auto;
            "
          >
            <u-checkbox-group v-model="from.harm" placement="column" :labelSize="32">
              <u-checkbox
                activeColor="#53c21d"
                v-for="(item, index) in from.harm"
                :label="item.label"
                :name="item.value"
                shape="circle"
                :key="index"
                style="padding: 10px 20px"
                :checked="true"
              >
              </u-checkbox>
            </u-checkbox-group>
          </view>
          <u-form-item
            label="安全措施"
            prop="text"
            borderBottom
            @click="toSafetyMeasures"
          >
            <u--input
              v-model="from.text"
              placeholder="选择安全措施"
              border="none"
              disabled
              disabledColor="#ffffff"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <view
            style="
              background: #f6f6f6;
              margin-bottom: 30px;
              border-radius: 8px;
              height: 200px;
              overflow-y: auto;
            "
          >
            <u-checkbox-group v-model="from.safetyMeasures" placement="column" :labelSize="32">
              <u-checkbox
                activeColor="#53c21d"
                v-for="(item, index) in from.safetyMeasures"
                :label="item.label"
                :name="item.value"
                shape="circle"
                :key="index"
                style="padding: 10px 20px"
                :checked="true"
              >
              </u-checkbox>
            </u-checkbox-group>
          </view>
          <u-form-item
            label="个人用品防护"
            prop="text"
            borderBottom
            @click="toProtection"
          >
            <u--input
              v-model="from.text"
              placeholder="选择个人用品防护"
              border="none"
            ></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <view
            style="
              background: #f6f6f6;
              margin-bottom: 30px;
              border-radius: 8px;
              height: 200px;
              overflow-y: auto;
            "
          >
            <u-checkbox-group v-model="from.personalProtection" placement="column" :labelSize="32">
              <u-checkbox
                activeColor="#53c21d"
                v-for="(item, index) in from.personalProtection"
                :label="item.label"
                :name="item.value"
                shape="circle"
                :key="index"
                style="padding: 10px 20px"
                :checked="true"
              >
              </u-checkbox>
            </u-checkbox-group>
          </view>
        </view>
        <view class="title"> 安全交底 </view>
        <view class="box">
          <user-pick
            :label="'安全交底人'"
            :multiple="false"
            :title="'安全交底人'"
            :placeholder="'请选择安全交底人'"
            v-model="from.aqjdr"
            :prop="'aqjdr'"
          ></user-pick>
          <user-pick
            :label="'接受交底人'"
            :multiple="false"
            :title="'接受交底人'"
            :placeholder="'请选择接受交底人'"
            v-model="from.jsjdr"
            :prop="'jsjdr'"
          ></user-pick>
        </view>
<!--        <view class="title"> 安全教育 </view>-->
        <view class="box">
<!--          <user-pick-->
<!--            :label="'实施安全教育人'"-->
<!--            :multiple="false"-->
<!--            :title="'实施安全教育人'"-->
<!--            :placeholder="'请选择实施安全教育人'"-->
<!--            v-model="from.ssaqjyr"-->
<!--            :prop="'ssaqjyr'"-->
<!--          ></user-pick>-->
<!--          <u-form-item-->
<!--            label="是否已实施"-->
<!--            prop="sfyss"-->
<!--            borderBottom-->
<!--            @click="itemClick('sfyss', '是否已实施')"-->
<!--          >-->
<!--            <u&#45;&#45;input-->
<!--              v-model="from.sfyss"-->
<!--              placeholder="选择是否已实施"-->
<!--              border="none"-->
<!--              disabled-->
<!--              disabledColor="#ffffff"-->
<!--            ></u&#45;&#45;input>-->
<!--            <u-icon slot="right" name="arrow-right"></u-icon>-->
<!--          </u-form-item>-->
        </view>
        <view class="title"> 审核人/审核部门 </view>
        <view class="box">
          <user-pick
            :label="'作业审批人'"
            :multiple="false"
            :title="'作业审批人'"
            :placeholder="'请选择作业审批人'"
            v-model="from.zyspr"
            :prop="'zyspr'"
          ></user-pick>
          <user-pick
            :label="'所在单位'"
            :multiple="false"
            :title="'所在单位'"
            :placeholder="'请选择所在单位'"
            v-model="from.szdw"
            :prop="'szdw'"
          ></user-pick>
          <user-pick
            :label="'审核部门意见'"
            :multiple="false"
            :title="'审核部门意见'"
            :placeholder="'请选择审核部门意见'"
            v-model="from.shbmyj"
            :prop="'shbmyj'"
          ></user-pick>
          <user-pick
            :label="'审批部门意见'"
            :multiple="false"
            :title="'审批部门意见'"
            :placeholder="'请选择审批部门意见'"
            v-model="from.spbmyj"
            :prop="'spbmyj'"
          ></user-pick>
        </view>
        <view class="title"> 验收 </view>
        <view class="box">
          <user-pick
            :label="'验收人'"
            :multiple="false"
            :title="'验收人'"
            :placeholder="'请选择验收人'"
            v-model="from.ysr"
            :prop="'ysr'"
          ></user-pick>
        </view>
      </u--form>
      <u-button type="primary" text="申请" @click="submit" class="but"></u-button>
    </view>
  </view>
</template>

<script>
import UTextarea from "../../../uni_modules/uview-ui/components/u-textarea/u-textarea";
import userPick from "@/pages/Components/userPick";
import {
  getDepartmentAPI,
  heightWorkingAPI,
  AddHeightWorAPI
} from "../../../api/api";
export default {
  components: {
    UTextarea,
    userPick,
  },
  data() {
    return {
      show: false,
      showType: 0,
      dateTimeType: 0,
      dateTimeShow: false,
      columns: [],
      columns2: [],
      columnData: [],
      title: null,
      newData: new Date().getTime(),
      labelStyle: {
        color: "#666",
      },
      from: {
        text: "",
        zypmc: "",
        gltszy: "",
        zysqdw: "",
        zysqsj: "",
        zyfzr: "",
        applyDate: "",
        workImplementDate: "",
        zysssj: "",
        jhr: "",
        zynnr: "",
        gczyjb: "",
        zydw: "",
        zygd: "",
        harm: [],
        whbs:'',
        safetyMeasures: [],
        aqcs:'',
        grypfh: '',
        personalProtection:[],
        aqjdr: "",
        jsjdr: "",
        ssaqjyr: "",
        sfyss: "",
        zyspr: "",
        szdw: "",
        shbmyj: "",
        spbmyj: "",
        ysr: "",
      },
      rules: {
        // 'text': {
        //   type: 'string',
        //   required: true,
        //   message: '请填写姓名',
        //   trigger: ['blur', 'change']
        // },
      },
      temKey: "",
      obj: {
        sfyss: [["未实施", "已实施"]],
        zydj: [["Ⅰ级高处作业", "Ⅱ级高处作业", "Ⅲ级高处作业", "Ⅳ级高处作业"]],
      },
    };
  },
  watch: {
    showType(val) {
      if (val === 1 || val === 5) {
        getDepartmentAPI({}).then((r) => {
          let msg = r.data.map((e) => {
            return e.deptName;
          });
          this.columns = [msg];
        });
      } else if (val === 7) {
        heightWorkingAPI({}).then((r) => {
          let msg = r.data.map((e) => {
            return e.zypmc;
          });
          this.columns = [msg];
        });
      }
    },
  },
  onShow() {
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1];
    let brand = currPage.brand
    if (!!brand) {
      if (brand.option) {
        this.from.harm = brand.option
        this.from.whbs = brand.optionList.toString()
      } else if (brand.list) {
        this.from.safetyMeasures = brand.list
        this.from.aqcs = brand.idList.toString()
      } else if (brand.fh) {
        this.from.personalProtection = brand.fh
        this.from.grypfh = brand.fhlist.toString()
      }
    }
  },
  methods: {
    confirm(e) {
      this.from[this.temKey] = e.value[0];
      this.show = false;
    },
    itemClick(key, title) {
      this.show = true;
      this.title = title;
      this.temKey = key;
      this.columns = this.obj[key];
    },
    toProtection() {
      uni.navigateTo({
        url: "../HotWork/protection/protection",
      });
    },
    toHazardousFactors() {
      uni.navigateTo({
        url: "../HotWork/hazardousFactors/hazardousFactors",
      });
    },
    toSafetyMeasures() {
      uni.navigateTo({
        url: "../HotWork/safetyMeasures/safetyMeasures",
      });
    },
    // pickerDate 确定事件
    checkDateTime(e) {
      const timeFormat = uni.$u.timeFormat;
      switch (this.dateTimeType) {
        case 1:
          this.from.applyDate = timeFormat(e.value, "yyyy-mm-dd hh:MM");
          this.from.zysqsj = timeFormat(e.value, "yyyymmddhhMM");
          break;
        case 2:
          this.from.workImplementDate = timeFormat(e.value, "yyyy-mm-dd hh:MM");
          this.from.zysssj = timeFormat(e.value, "yyyymmddhhMM");
          break;
      }
      this.dateTimeShow = false;
    },
    submit() {
      AddHeightWorAPI({...this.from}).then((r)=>{
        if (r.code === 200) {
          this.$refs.uToast.show({
            type: 'default',
            message: "新增高处作业票成功",
            url: '/pages/componentsB/tag/tag',
            iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'

          })
        } else {
          this.$refs.uToast.show({
            type: 'error',
            message: "请检查表单信息",
            iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
          })
        }
      })
    },
  },
};
</script>

<style lang="scss">
.container {
  padding: 0 24rpx;
  background-color: #f6f6f6;

  .title {
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 44rpx;
    padding: 20rpx 48rpx;
  }

  .box {
    padding: 0 48rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }
}

.but {
  margin: 30rpx 0;
}
</style>
